<template>
  <div class="list_title">场景切换</div>
  <div class="map_list changeMap">
    <div>
      <div class="img_map_box" @click="changeBaseMap" data-map="BaseMap">
        <img src="../../assets/images/topo.png" alt="" />
        <div class="map_active" v-show="BaseMap_flagmark">
          <img src="../../assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>标准地图</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="changeBaseMap" data-map="ImageMap">
        <img src="../../assets/images/satellite.png" alt="" />
        <div class="map_active" v-show="ImageMap_flagmark">
          <img src="../../assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>影像地图</div>
    </div>
  </div>
</template>

<script setup>
// 原始逻辑
import { onMounted, ref, toRaw, defineComponent, reactive } from 'vue'
import emitter from '@/utils/bus'
import { userMap, mapStyle, mapFlag } from '@/store/index'
let map = userMap() //接收地图
let list
let flag = mapFlag() //接收地图
onMounted(() => {
  list = toRaw(map.map)
  BaseMap_flagmark.value = toRaw(flag.vecFlag)
  ImageMap_flagmark.value = toRaw(flag.imgFlag)
})
// 分割线
const BaseMap_flag = ref(true)
const BaseMap_flagGJ = ref(true)
const BaseMap_flagmark = ref()
const ImageMap_flag = ref(false)
const ImageMap_flagGJ = ref(false)
const ImageMap_flagmark = ref()

const changeBaseMap = (e) => {
  let mapType = e.currentTarget.getAttribute('data-map')
  if (mapType === 'BaseMap') {
    BaseMap_flag.value = true
    BaseMap_flagGJ.value = true
    flag.vecFlag = true
    BaseMap_flagmark.value = toRaw(flag.vecFlag)
    ImageMap_flag.value = false
    ImageMap_flagGJ.value = false
    flag.imgFlag = false
    ImageMap_flagmark.value = toRaw(flag.imgFlag)
  }
  if (mapType === 'ImageMap') {
    BaseMap_flag.value = false
    BaseMap_flagGJ.value = false
    flag.vecFlag = false
    BaseMap_flagmark.value = toRaw(flag.vecFlag)
    ImageMap_flag.value = true
    ImageMap_flagGJ.value = true
    flag.imgFlag = true
    ImageMap_flagmark.value = toRaw(flag.imgFlag)
  }

  let mapShowList = {
    BaseMap: BaseMap_flag.value,
    BaseMapGJ: BaseMap_flagGJ.value,
    ImageMap: ImageMap_flag.value,
    ImageMapGJ: ImageMap_flagGJ.value,
  }
  emitter.emit('changeMap', mapShowList)
}
</script>

<style lang="less" scoped>
.list_title {
  height: 25px;
  border-bottom: 2px solid #72ed5c;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}

.map_list {
  display: flex;
  font-size: 13px;
  text-align: center;

  .img_map_box {
    position: relative;
    height: 56px;
    width: 60px;
    border: 1px solid #80eeff;
    border-radius: 3px;
    cursor: pointer;

    .map_active {
      position: absolute;
      top: 40px;
      width: 100%;
      height: 16px;
      background-color: rgb(7, 247, 93);
      opacity: 0.85;
    }
    img {
      vertical-align: baseline;
    }
  }
  .img_map_box > img {
    width: 100%;
    height: 100%;
  }
}
.map_list > div {
  margin-top: 7px;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
